<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="close"
  >
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :border="true"
      :data="list"
      :height="height"
      :size="lineHeight"
      :stripe="true"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="序号"
        show-overflow-tooltip
        width="95"
      >
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable"
        :width="item.width"
      >
        <template #default="{ row }">
          {{ row[item.prop] }}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        fixed
        label="操作"
        show-overflow-tooltip
        width="100"
      >
        <template #default="{ row }">
          <el-button type="text" @click="handleQueryConfigInfoHistory(row)">
            查看
          </el-button>
          <el-button type="text" @click="handleRollBack(row)">回滚</el-button>
        </template>
      </el-table-column>
    </el-table>

    <config-info-history-form
      ref="configInfoHistoryForm"
    ></config-info-history-form>
  </el-dialog>
</template>

<script>
  import { GetVersions, VersionRollBack } from '@/api/projectConfig/versions'
  import ConfigInfoHistoryForm from '../cnameSpaceComponents/configInfoHistoryForm'

  export default {
    name: 'VersionsForm',
    components: {
      ConfigInfoHistoryForm,
    },
    data() {
      return {
        title: '',
        dialogFormVisible: false,
        nameSpaceID: '',
        height: this.$baseTableHeight(1),
        lineHeight: 'mini',
        checkList: ['版本号', '发布时间'],
        columns: [
          {
            label: 'ID',
            width: '200',
            prop: 'id',
          },
          {
            label: '版本号',
            width: '200',
            prop: 'versionNo',
          },
          {
            label: '发布时间',
            width: '200',
            prop: 'createtime',
          },
        ],
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
      }
    },
    computed: {
      finallyColumns() {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      },
    },
    methods: {
      ShowForm(nameSpace) {
        this.title = '历史版本【' + nameSpace.nameSpace + '】'
        this.nameSpaceID = nameSpace.id
        this.dialogFormVisible = true

        this.fetchData()
      },
      close() {
        this.dialogFormVisible = false
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      async fetchData() {
        this.listLoading = true

        GetVersions({ NameSpaceID: this.nameSpaceID }).then((res) => {
          this.list = res.data
        })
        this.listLoading = false
      },
      // 查看历史版本信息
      handleQueryConfigInfoHistory(version) {
        this.$refs['configInfoHistoryForm'].ShowForm(version)
      },
      // 版本回滚
      handleRollBack(version) {
        this.$baseConfirm(
          '你确定要回滚至【' + version.versionNo + '】吗？',
          null,
          async () => {
            VersionRollBack({ VersionID: version.id }).then((res) => {
              if (res.data) {
                this.$baseMessage(res.msg, 'success')
                this.$emit('fetch-data', this.nameSpaceID)
                this.dialogFormVisible = false
              } else {
                this.$baseMessage(res.msg, 'error')
              }
            })
          }
        )
      },
    },
  }
</script>
